<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 杨雨翰
 * @LastEditTime: 2022-01-06 17:00:18
-->
<template>
  <div id="right2Container" style="height: 95%"></div>
</template>
<script>
//导入图表
import { Area } from "@antv/g2plot";
import { get } from "@/utils/request.js";
import moment from "moment";
import _ from "lodash";
export default {
  data() {
    return {
      pm25: [],
      pm10: [],
      tsp: [],
      noise: [],
      temperature: [],
      active: true,
    };
  },
  async mounted() {
    // 查询数据
    await this.loadData();
    // 页面渲染的时候初始化图表
    this.initChart();
  },
  methods: {
    async loadData() {
      let url = "/dashboard/pageQueryTodayData";
      let params = {
        page: 1,
        pageSize: 20,
        engineer_id: 29,
        device_id: 29,
      };
      let resp = await get(url, params);
      this.pm25 = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("hh:mm"),
          value: parseInt(item.pm25),
          type: "pm2.5",
        };
      });
      this.pm10 = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("hh:mm"),
          value: parseInt(item.pm10),
          type: "pm10",
        };
      });
      this.tsp = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("hh:mm"),
          value: parseInt(item.pm10),
          type: "tsp",
        };
      });
      this.noise = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("hh:mm"),
          value: parseInt(item.pm10),
          type: "noise",
        };
      });
      this.temperature = resp.data.list.map((item) => {
        return {
          time: moment(item.insert_time).format("hh:mm"),
          value: parseInt(item.pm10),
          type: "temperature",
        };
      });
      this.pm25 = _.uniqBy(this.pm25, "time");
      this.pm10 = _.uniqBy(this.pm10, "time");
      this.tsp = _.uniqBy(this.tsp, "time");
      this.noise = _.uniqBy(this.noise, "time");
      this.temperature = _.uniqBy(this.temperature, "time");
    },

    initChart() {
      const chartData = [
        ...this.pm25,
        ...this.pm10,
        ...this.tsp,
        ...this.noise,
        ...this.temperature,
      ];
      console.log(chartData);
      //初始化图表实例，配置配置项
      const area = new Area("right2Container", {
        data: chartData,
        xField: "time",
        yField: "value",
        seriesField: "type",
        smooth: true,
        color: "#7FFFD4",
        colors10: "#7FFFD4",
        xAxis: {
          range: [0, 1],
          label: {
            style: {
              fill: "white",
            },
          },
        },
        yAxis: {
          range: [0, 1],
          label: {
            style: {
              fill: "white",
              // color: ["#6897a7", "#8bc0d6"],
            },
          },

          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        tooltip: {
          showMarkers: false, // 列表前面标点
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(72,169,235,0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontFamily: "微软雅黑",
            },
          },
        },
        meta: {
          value: {
            alias: "pm",
          },
          time: {
            alias: "时间",
          },
        },
      });
      //3.执行绘画渲染
      area.render();
      // 4.开启定时器，动态改变组件数据
      setInterval(() => {
        if (this.active) {
          area.changeData(this.data2);
        } else {
          area.changeData(this.data1);
        }
        this.active = !this.active;
      }, 3000);
    },
  },

  //vue实例，完全挂载到页面上
  // mounted() {
  //   this.initChart();
  // },
};
</script>